<template>
  <view :class="prefixCls" :style="style">
    <slot></slot>
  </view>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { props } from './props';
  import globalConfig from '../../utils/global-config.js';
  import Themes from '@/varletUni/themes';

  export default defineComponent({
    props,
    setup() {
      const prefixCls = globalConfig.getPrefixCls('style-provider');

      function withSiteConfigNamespace(styleVars: Record<string, any>) {
        return Object.entries(styleVars).reduce((styleVars, [key, value]) => {
          styleVars[`--site-config-${key}`] = value as string;
          return styleVars;
        }, {});
      }

      const style = ref({});

      function updateStyleVars(styleVars: Record<string, any>) {
        if (styleVars) {
          const siteStyleVars = withSiteConfigNamespace(styleVars);
          return (style.value = { ...siteStyleVars, ...Themes.dark });
        }
        style.value = {};
      }
      return {
        updateStyleVars,
        style,
        prefixCls,
      };
    },
  });
</script>

<style lang="less">
  .var-style-provider {
    height: 100vh;
    padding-top: 40px;
    background: var(--site-config-color-body);
    color: var(--site-config-color-text);
  }
</style>
